<template>
  <div id="app">
    <hb-head headfont="店铺商品列表"></hb-head>
    <div class="mui-content store-detail">
      <div style="background-color: white">
        <div v-if="store">
          <div style="padding: 20px;">
            <div style="float: left; width: 60px; height: 60px;">
              <img v-if="store.file" :src="webApiDomain + '/public/uploads/' + store.file.savepath + store.file.savename" style="width: 50px; height: 50px;" />
            </div>
            <div style="float: left;">
              <div>
                <span style="font-size: 18px;">{{ store.name }}</span>
              </div>
              <div style="margin-top: 3px;">
                <div style="display: inline-block; background-color: #da0029; color: white; padding: 0 5px; border-radius: 3px;">
                  <img src="../../assets/img/icon_call.png" style="width: 10px; height: 10px;" />
                  <span style="font-size: 10px;">联系店家</span>
                </div>
                <div style="display: inline-block; background-color: #da0029; color: white; padding: 0 5px; border-radius: 3px;">
                  <img src="../../assets/img/locate.png" style="width: 10px; height: 10px;" />
                  <span style="font-size: 10px;">查看地址</span>
                </div>
              </div>
            </div>
          </div>
          <div style="clear: both"></div>
          <div style="padding: 0 20px 10px 20px; border-bottom: 10px solid #dddddd">
            <span style="color: #333333; font-size: 12px;">{{ store.content }}</span>
          </div>
        </div>
        <div v-if="store" style="margin-top: 5px;">
          <select style="width: 50%; float: left; border: 1px solid #cccccc !important;" @change="chooseCategory1($event)">
            <option v-for="(item, i) in store.category" :key="item.id" :value="item.id">{{ item.name }}</option>
          </select>
          <select style="width: 50%; float: left; border: 1px solid #cccccc !important;" @change="chooseCategory2($event)">
            <option v-for="(item, i) in category2" :key="item.id" :value="item.id">{{ item.name }}</option>
          </select>
        </div>
        <div style="clear:both"></div>
        <div>
          <p v-if="products && products.length == 0">此分类下暂无商品</p>
          <div class="default-content floor store-products" style="margin-top: 0;">
            <tmall-product-item v-if="products" :products="products" @selectProduct="openSelectPanel"></tmall-product-item>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  import {ajax, userSettings, userRedirect, callWechatPay} from 'assets/js/Lib'

  import 'assets/css/mui.css'

  import HbHead from 'components/HbHead'
  import TmallProductItem from 'components/TmallProductItem'
  import { apiDomain } from 'assets/js/Lib'

  export default {
    data() {
      return {
        products: null,
        page: 1,
        store: null,
        category2: [],
        curCategoryId: 0,
      }
    },
    components: {
      HbHead, TmallProductItem
    },
    computed: {
      webApiDomain: function () {
        return apiDomain;
      }
    },
    //实例初始化最之前，无法获取到data里的数据
    beforeCreate() {

    },
    //在挂载开始之前被调用
    beforeMount() {

    },
    //已成功挂载，相当ready()
    mounted() {

      let params = url('?');
      let store_id = params.store_id;

      const vm = this;
//      vm.requestProducts(store_id, vm.page, (res) => {
//        vm.products = vm.products.concat(res.product);
//        vm.page++;
//      });

      this.requestCategories(store_id);

      mui.init({
        pullRefresh : {
          container: '.store-products',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
          up : {
            height:50,//可选.默认50.触发上拉加载拖动距离
            auto:true,//可选,默认false.自动上拉加载一次
            contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
            contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
            callback : function() {
              if (vm.curCategoryId > 0) {
                vm.requestProducts(store_id, vm.curCategoryId, vm.page++, (res) => {
                  vm.products = vm.products.concat(res.product);
                  this.endPullupToRefresh(false);
                });
              }
            }
          }
        }
      })
    },
    //相关操作事件
    methods: {
      openSelectPanel: function (index) {
        const product = this.products[index]
        let obj = {
          id: product.id,
          imgurl: apiDomain + '/public/uploads/' + product.file.savepath + product.file.savename,
          price: product.price
        }
        this.selectproduct = obj
      },
      requestCategories(store_id) {
        ajax({
          url: `/api/store/categories?store_id=${store_id}`,
          type: 'GET',
          success: (res) => {
            console.log('requestCategories', res);
            this.store = res;
            if (this.store.category.length > 0) {
              this.category2 = this.store.category[0].children;
              if (this.category2.length > 0) {
                this.curCategoryId = this.category2[0].id;
                this.page = 1;
                this.requestProducts(this.store.id, this.curCategoryId, this.page++, (res) => {
                  this.products = res.product;
                });
              }
            }
          }
        })
      },
      requestProducts(store_id, category_id, page, callback) {
        ajax({
          url: `/api/store/products?store_id=${store_id}&category_id=${category_id}&page=${page}`,
          type: 'GET',
          success: (res) => {
            callback(res);
          }
        })
      },
      chooseCategory1(ele) {
        console.log('chooseCategory1 ele.target.value', ele.target.value);
        for (let item of this.store.category) {
          if (item.id == ele.target.value) {
            this.category2 = item.children;
            break;
          }
        }
      },
      chooseCategory2(ele) {
        console.log('chooseCategory2 ele.target.value', ele.target.value);
        this.page = 1;
        this.curCategoryId = ele.target.value;
        this.requestProducts(this.store.id, this.curCategoryId, this.page++, (res) => {
          this.products = res.product;
        });
      },
    }
  }
</script>

<style lang="less">
  .content-banner {
    height: 60px;
  }

  .text-button {
    width: 24.99%;
    height: inherit;
    float: left;
    padding: 15px;
    cursor: pointer;

    &:active {
      background: #eee;
    }

    span {
      display: block;
      font-size: 12px;
      line-height: 12px;
      color: #232326;
      text-align: center;
    }

    span.header-text {
      font-size: 16px;
      line-height: 16px;
      margin-bottom: 6px;
    }
  }

  .img-button {
    width: 33.33%;
    height: inherit;
    float: left;
    padding: 15px;
    cursor: pointer;

    &:active {
      background: #eee;
    }

    img {
      width: 100%;
      height: 100%;
    }

    span.button-header {
      width: 21px;
      height: 18px;
      margin: 0 auto;
      margin-bottom: 4px;
      position: relative;
      display: block;

      .mui-badge {
        position: absolute;
        right: -15px;
        top: -10px;
      }
    }

    span.button-footer {
      display: block;
      font-size: 11px;
      line-height: 11px;
      color: #232326;
      text-align: center;
      margin-bottom: 4px;
    }
  }

  #app {

    .tmall-header~.mui-content .mui-scroll-wrapper {
      padding-top: 1.2rem;
    }

    .default-content {
      background-color: #fff;
      padding: 0.4083333333333333rem;
      margin: 0;
      &.slides {
        padding: 25px;

        @media (max-width: 320px) {
          padding: 20px;
        }
      }
      &.floor {
        margin-top: 0.3333333333333333rem;
        padding-top: 0;
      }
    }

    img.slg {
      width: 15px;
      height: 18px;
    }

    .mui-table-view ~ .mui-card {
      margin-top: -2px;
    }

    .mui-table-view-cell {
      &:after {
        left: 0px;
      }
    }

    .mui-navigate-right {
      padding: 10px 65px 10px 11px;
      font-size: 14px;
      min-height: 32px;
    }

    .mui-navigate-right > .text {
      color: #bbb;
      right: 35px;
      position: absolute;
      top: 28%;
    }

    .mui-card {
      margin: 15px 0 10px 0;
      border-radius: 0px;
      box-shadow: 0 0px 1px rgba(0, 0, 0, .3);
    }

    .mui-table-view {
      /*margin-top: 25px;*/
    }

    .products .item:nth-child(2), .products .item:nth-child(2n) {
      margin-left: 2.5%;
    }

    .store-detail .mui-pull-bottom-pocket {
      display: none !important;
    }
  }
</style>
